<template>
  <div class="proxy-config-editor">
    <el-row :gutter="12">
      <el-col :span="12">
        <el-form-item label="代理类型">
          <el-select v-model="proxyData.type" placeholder="选择代理类型" @change="updateConfig">
            <el-option label="HTTP" value="http" />
            <el-option label="HTTPS" value="https" />
            <el-option label="SOCKS5" value="socks5" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="代理主机">
          <el-input v-model="proxyData.host" placeholder="如：127.0.0.1" @input="updateConfig" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="12">
      <el-col :span="12">
        <el-form-item label="端口">
          <el-input-number
            v-model="proxyData.port"
            :min="1"
            :max="65535"
            placeholder="如：8080"
            style="width: 100%"
            @change="updateConfig" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户名（可选）">
          <el-input v-model="proxyData.username" placeholder="代理用户名" @input="updateConfig" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="密码（可选）">
          <el-input
            v-model="proxyData.password"
            type="password"
            placeholder="代理密码"
            show-password
            @input="updateConfig" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- JSON预览 -->
    <div class="json-preview">
      <el-text type="info" size="small">配置预览：</el-text>
      <pre class="json-content">{{ formattedJson }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

// 代理配置数据
const proxyData = ref({
  type: 'http',
  host: '127.0.0.1',
  port: 8080,
  username: '',
  password: ''
})

// 格式化的JSON预览
const formattedJson = computed(() => {
  try {
    const config = {
      type: proxyData.value.type,
      host: proxyData.value.host,
      port: proxyData.value.port
    }

    // 只有在有值时才添加用户名和密码
    if (proxyData.value.username) {
      config.username = proxyData.value.username
    }
    if (proxyData.value.password) {
      config.password = proxyData.value.password
    }

    return JSON.stringify(config, null, 2)
  } catch (error) {
    return '{}'
  }
})

// 监听modelValue变化
watch(() => props.modelValue, (newValue) => {
  if (newValue && newValue !== formattedJson.value) {
    try {
      const parsed = JSON.parse(newValue)
      proxyData.value = {
        type: parsed.type || 'http',
        host: parsed.host || '127.0.0.1',
        port: parsed.port || 8080,
        username: parsed.username || '',
        password: parsed.password || ''
      }
    } catch (error) {
      console.warn('解析代理配置失败:', error)
    }
  }
}, { immediate: true })

// 更新配置
const updateConfig = () => {
  emit('update:modelValue', formattedJson.value)
}
</script>

<style lang="scss" scoped>
.proxy-config-editor {
  .json-preview {
    margin-top: 16px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;

    .json-content {
      margin: 8px 0 0;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 12px;
      color: #495057;
      background: transparent;
      border: none;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
}
</style>